<!--
 * @Description: 地图-JS
 * @Author: rendc
 * @Date: 2025-11-18 09:13:14
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-18 10:17:36
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图-JS</title>
  <style>
    #myMap{
      border: 1px solid red;
      /* display */
      width: 1200px;
      height: 800px; 
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script type="text/javascript">
    // 全局变量
    window._AMapSecurityConfig = {
      // 将地图API的秘钥设置为全局变量
      securityJsCode:'6640094791429daa64da736d3eac3a78',
    }
  </script>
  <!-- 引入地图资源 -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1da768e5991564e987e2564af4c37d3b"></script>
</head>

<body>
  <div id="myMap"></div>
  
</body>
<script>
  // https://lbs.amap.com/api/javascript-api/guide/abc/quickstart
  // 创建地图实例对象
  var map = new AMap.Map('myMap', {
      zoom:18,//地图缩放级别
      center: [120.839993,31.473564],//中心点坐标
      viewMode:'3D'//使用3D视图
  });
  //创建实时路况图层
  // var trafficLayer = new AMap.TileLayer.Traffic({
  //     zIndex: 10
  // });
  //添加图层到地图
  // map.add(trafficLayer);
  // 创建一个 Marker 实例：
  var marker = new AMap.Marker({
      position: new AMap.LngLat(120.839993,31.473564),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '浦东软件园'
  });
  var marker2 = new AMap.Marker({
      position: new AMap.LngLat(120.839988,31.473500),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '浦东软件园'
  });
  var marker3 = new AMap.Marker({
      position: new AMap.LngLat(120.839900,31.473599),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '浦东软件园'
  });
  // 给marker3绑定点击事件
  AMap.event.addListener(marker3, 'click', function () {
    // 获取标记点经纬度
    var {Q,R} = marker3.getPosition();
    console.log('🤡 CC - Q,R:', Q,R);
    //鼠标点击marker3弹出自定义的信息窗体
    Q=Q+0.000090;
    R=R+0.000099;
    console.log('🤡 CC - Q,R:', Q,R);
    infoWindow.open(map, new AMap.LngLat(R,Q));
    // console.log('🤡 CC - marker3.getPosition():', marker3.getPosition());
  });
  var content = '<div><i class="fa fa-spinner fa-spin"></i></div>';

  var marker4 = new AMap.Marker({
      content: content,  // 自定义点标记覆盖物内容
      position:  [120.839988,31.473500], // 基点位置
      offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
  });

  // 将创建的点标记添加到已有的地图实例：
  map.add(marker);
  // map.add(marker2);
  map.add(marker3);
  map.add(marker4);

  // 信息窗体 
  // 信息窗体的内容
  var content = [
      '<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ',
      '<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>',
      "电话 : 010-84107000   邮编 : 100102",
      "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
  ];

  // 创建 infoWindow 实例	
  var infoWindow = new AMap.InfoWindow({
    content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
  });
  // 指定打开信息窗体的位置
  var position = new AMap.LngLat(120.839988,31.473500);
  // 在指定位置打开信息窗体
  // infoWindow.open(map,position);
</script>
</html>